import React, { ReactElement, useEffect, useState } from 'react'
import { connect } from 'umi'
import { Select, Input } from 'antd'
import { getEquipList } from '@/api/hero'
import styles from '../HeroCard.less'

const { Option } = Select;
const { TextArea } = Input

interface Props {
    title: string,
    type: string,
    heroCard: any,
    changeEquip: Function
}

function Index({ title, type, heroCard, changeEquip }: Props): ReactElement {
    const [equip, setEquip] = useState([])
    useEffect(() => {
        getEquipList().then((res: any) => {
            setEquip(res)
        })
    }, [])

    function handleChange(value: any) {
        console.log(value)
        changeEquip(type, value, "equipment")
    }
    return (
        <div>
            <div className={styles.flex}>
                <span>
                    {title}出装:
                </span>
                <div>
                    <Select
                        mode="multiple"
                        style={{ width: '100%' }}
                        placeholder="请选择"
                        defaultValue={[]}

                        onChange={handleChange}
                        optionLabelProp="label"
                    >
                        {
                            equip.map((item: any) => {
                                return <Option key = { item._id } value={ item._id } label={ item.name }>
                                    <div className="demo-option-label-item">
                                        { item.name }
                                    </div>
                                </Option>
                            })
                        }

                    </Select>
                </div>
            </div>
            <div className={styles.flex}>
                <span>
                    {title}技巧:
                </span>
                <div>
                    <TextArea value={heroCard[type].tips} onChange={(ev) => {
                        changeEquip(type, ev.target.value, "tips")
                    }} />
                </div>
            </div>
        </div>
    )
}

export default connect((state: any) => {
    const { heroCard } = state
    return {
        heroCard
    }
}, (dispatch) => {
    return {
        changeEquip(com: any, value: string, prop: string) {
            dispatch({ type: "heroCard/changeEquip", com, value, prop })
        }
    }
})(Index)
